<template>
	<view class="um-container" :style="styles">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
type PropsType = {
	align?: string;
	direction?: string;
	valign?: string;
	gap?: string;
	rowGap?: string;
	padding?: string;
	width?: string;
	height?: string;
	maxHeight?: number;
	backgroundColor?: string;
	wrap?: string;
	customStyle?: any;
};

const props = defineProps<PropsType>();

const alignMap = {
	left: 'flex-start',
	center: 'center',
	right: 'flex-end',
	between: 'space-between',
	around: 'space-around'
};
const valignMap = {
	top: 'flex-start',
	center: 'center',
	bottom: 'flex-end'
};
const directionMap = {
	horizontal: 'row',
	vertical: 'column'
};
const styles = computed(() => {
	const justifyContent = props.direction === 'vertical' ? valignMap[props.valign] : alignMap[props.align];
	const alignItems = props.direction === 'vertical' ? alignMap[props.align] : valignMap[props.valign];

	return {
		display: 'flex',
		...(props.wrap ? { flexWrap: props.wrap } : {}),
		...(props.backgroundColor ? { backgroundColor: props.backgroundColor } : {}),
		...(props.direction ? { flexDirection: directionMap[props.direction] } : {}),
		...(justifyContent ? { justifyContent } : {}),
		...(alignItems ? { alignItems } : {}),
		...(props.gap ? { gap: props.gap } : {}),
		...(props.rowGap ? { rowGap: props.rowGap } : {}),
		...(props.padding ? { padding: props.padding } : {}),
		...(props.height ? { height: props.height } : {}),
		...(props.width ? { width: props.width } : {}),
		...(props.maxHeight ? { maxHeight: props.maxHeight + 'rpx' } : {}),
		...props.customStyle
	};
});
</script>

<style></style>
